<template>
  <page class="device-filter">
    <page-header>
      <x-header :left-options="{backText: ''}">筛选</x-header>
    </page-header>
    <page-content :scroll="false">
      <group gutter='0px'>
          <!-- 设备类型 -->
        <popup-picker
          class='popup'
          title="设备类型"
          cancel-text="取消"
          confirm-text="确认"
          :data="deviceTypeList"
          v-model="value1"
          @on-change="handleDeviceTypeChange"
          :show-name="true"
          placeholder="请选择设备类型">
        </popup-picker>
        <!-- 设备名称 -->
        <popup-picker
          class='popup'
          title="设备名称"
          cancel-text="取消"
          confirm-text="确认"
          :data="deviceNameList"
          v-model="value2"
          @on-show="handleShow"
          @on-change="handleDeviceNameChange"
          :show-name="true"
          placeholder="请选择设备名称">
        </popup-picker>
        <!-- 主机型号 -->
        <cell class='popup' title="主机型号" placeholder="请选择主机型号">
            <div @click='handleClick'>{{filterNames['manufacturerModel'] || '请选择主机型号'}}</div>
        </cell>
        <!--物料号 -->
        <cell class='popup' title="物料号" placeholder="请选择物料号">
          <router-link :to="{path:'/matermodle'}" style='color: #999;'>{{filterNames['deviceModel'] || '请选择物料号'}}</router-link>
        </cell>
        <!-- 所属仓库 -->
        <cell class='popup' title="所属仓库" placeholder="请选择所属仓库">
          <router-link :to="{path:'/housemodle'}" style='color: #999;'>{{filterNames['warehouseName'] || '请选择所属仓库'}}</router-link>
        </cell>
        <!-- 设备状态 -->
        <popup-picker
          class='popup'
          title="设备状态"
          cancel-text="取消"
          confirm-text="确认"
          :data="deviceStatusList"
          v-model="value3"
          @on-change="handleDeviceStatusChange"
          :show-name="true"
          placeholder="请选择设备状态"></popup-picker>
        <!-- 管辖单位 -->
        <cell class='popup' title="管辖单位" placeholder="请选择管辖单位">
          <router-link :to="{path:'/cponymodle'}" style='color: #999;'>{{filterNames['manageOffice'] || '请选择管辖单位'}}</router-link>
        </cell>
        <!-- 产权单位 -->
        <cell class='popup' title="产权单位" placeholder="请选择产权单位">
          <router-link :to="{path:'/pertymodle'}" style='color: #999;'>{{filterNames['propertyOffice'] || '请选择产权单位'}}</router-link>
        </cell>
      </group>
    </page-content>
    <page-footer>
      <div class="fix">
        <button class="res" @click="handleRest">重置</button>
        <button class="qued" @click="handleCommit">确定</button>
      </div>
    </page-footer>
  </page>
</template>

<script>
import { mapGetters } from 'vuex'
import { PopupPicker, Datetime, XHeader, Cell, XTextarea, XInput, Group } from 'vux'
import { device } from '@service'
import { MessageBox } from 'mint-ui'
export default {
  name: 'DeviceFilter',
  components: {
    PopupPicker,
    Group,
    XInput,
    XTextarea,
    Datetime,
    Cell,
    XHeader
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token',
      filterParams: 'filter/params',
      filterNames: 'filter/showNames'
    }),
    userId () {
      return this.userInfo.id
    }
  },
  data () {
    return {
      deviceTypeList: [],
      deviceType: '',
      value1: [],
      deviceNameList: [],
      deviceName: '',
      value2: [],
      manufacturerModelId: '',
      deviceModelId: '',
      warehouseId: '',
      deviceStatusList: [],
      deviceStatus: '',
      value3: [],
      manageOfficeId: '',
      propertyOfficeId: '',
      mainCode: ''
    }
  },
  methods: {
    //
    async loadDeviceType () {
      let menuType = 'deviceType'
      let token = this.token
      try {
        let data = await device.getMenuData({token, menuType})
        data = data.map(item => {
          return {
            name: item.label,
            value: item.value
          }
        })
        this.deviceTypeList = [data]
      } catch (error) {
        console.log(error)
      }
    },
    //
    async loadDeviceName () {
      let menuType = 'deviceName'
      let token = this.token
      let deviceType = this.deviceType
      try {
        let data = await device.getMenuData({token, menuType, deviceType})
        data = data.map(item => {
          return {
            name: item.label,
            value: item.value
          }
        })
        this.deviceNameList = [data]
      } catch (error) {
        console.log(error)
      }
    },
    //
    async loadDeviceStatus () {
      let menuType = 'deviceStatus'
      let token = this.token
      try {
        let data = await device.getMenuData({token, menuType})
        data = data.map(item => {
          return {
            name: item.label,
            value: item.value
          }
        })
        this.deviceStatusList = [data]
      } catch (error) {
        console.log(error)
      }
    },
    // handle event
    async handleDeviceTypeChange (val) {
      this.deviceType = val[0]
      this.deviceNameList = []
      this.value2 = []
      this.deviceName = ''
      this.loadDeviceName()
      this.updateFilterStore()
    },
    handleShow () {
      if (this.deviceType.length === 0) {
        this.deviceNameList = [[{name: '请先选择设备类型', value: ''}]]
      }
    },
    handleDeviceNameChange (val) {
      this.deviceName = val[0]
      this.updateFilterStore()
    },
    handleDeviceStatusChange (val) {
      this.deviceStatus = val[0]
      this.updateFilterStore()
    },
    handleClick (val) {
      if (this.deviceType === 2) {
        MessageBox.alert('部件没有主机型号')
        return
      }
      this.$router.push({
        path: '/hostmodle',
        params: { deviceType: this.deviceType, deviceName: this.deviceName }
      })
    },
    updateFilterStore () {
      let keys = [
        'deviceType',
        'deviceName',
        'manufacturerModelId',
        'deviceModelId',
        'warehouseId',
        'deviceStatus',
        'manageOfficeId',
        'propertyOfficeId',
        'mainCod'
      ]
      let tmp = {}
      let filterParams = Object.assign(this.filterParams)
      keys.map(key => {
        filterParams[key] = null
        tmp[key] = this.filterParams[key] || this[key]
      })
      this.$store.dispatch('filter/updateFilterParams', tmp)
    },
    handleRest () {
      this.$store.dispatch('filter/reset')
      this.value1 = []
      this.value2 = []
      this.value3 = []
      this.deviceType = ''
      this.deviceName = ''
      this.deviceStatus = ''
    },
    handleCommit () {
      this.$router.replace('/device')
    }
  },
  created () {
    this.loadDeviceType()
    this.loadDeviceStatus()
    this.$store.dispatch('filter/reset')
  }
}
</script>

<style lang="scss">
.device-filter {
  .choice {
    width: 100%;
    height: 3.125rem;
    background: #fff;
  }

  .choice-c {
    padding: 0.5rem;
    border-bottom: 1px solid #f5f5f5;
  }

  .choice span {
    line-height: 2rem;
    font-size: 0.8rem;
    padding-left: 0.7rem;
  }

  .choice-k {
    width: 60%;
    float: right;
    line-height: 2rem;
    height: 2rem;
    border: none;
    font-size: 0.8rem;
    color: #606063;
  }

  .choice-d {
    width: 58.7%;
    line-height: 2rem;
    height: 2rem;
    font-size: 0.8rem;
    display: inline-block;
    color: #606063;
  }

  .choice-k option {
    font-size: 0.8rem;
  }

  .fix {
    width: 100%;
    height: 3rem;
    position: fixed;
    bottom: 0;
    display: flex;
  }

  .res {
    width: 50%;
    height: 3rem;
    background: #fff;
    border: none;
    color: #000;
  }

  .qued {
    width: 50%;
    height: 3rem;
    background: #4a82c6;
    border: none;
    color: #fff;
  }

  .popup {
    color: #606063 !important;
  }
}
.cponymodle {
  .cponymodle-inner{
    display: flex;
    flex-flow: column;
    height: 100%;
  }

  .host {
    height: 3rem;
    background: #fff;
    border-bottom: 1px solid #d4d4d4;
  }
  .host-c {
    padding-left: 0.7rem;
    padding-right: 0.3rem;
  }
  .host-c p {
    display: inline-block;
    line-height: 3rem;
    font-size: 0.8rem;
  }
  .host-c i {
    float: right;
    font-size: 1.5rem;
    line-height: 3rem;
  }
}
</style>
